@extends('Web.layouts.common')
@section('content')
<header class="article-header">
        <h1 class="article-title"><a href="javascript:;">{{$data->title}}</a></h1>
        <div class="article-meta"> <span class="item article-meta-time">
          <time class="time" data-toggle="tooltip" data-placement="bottom" title="时间：{{$data->add_date}}">
          <i class="glyphicon glyphicon-time"></i> {{$data->add_date}}
          </time>
          </span> 
         <span class="item article-meta-category" data-toggle="tooltip" data-placement="bottom" title="栏目：后端程序">
         <i class="glyphicon glyphicon-list"></i> <a href="javascript:;" title=""><?=$global_cat_names[$data->theme_id]->cat_name?></a>
         </span> 
         <span class="item article-meta-views" data-toggle="tooltip" data-placement="bottom" title="查看：120">
         <i class="glyphicon glyphicon-eye-open"></i> 共{{$data->views}}人围观</span>
          <span class="item article-meta-comment" data-toggle="tooltip" data-placement="bottom" title="评论：0"></span> 
         </div>
      </header>
      <article class="article-content">
      		<div id="test-editormd-view">
               <textarea style="display:none;" name="test-editormd-markdown-doc">{{$data->content}}</textarea>               
            </div>
            <div id="test-editormd-view2">
                <textarea id="append-test" style="display:none;">{{$data->content}}</textarea>
            </div>
      </article>
      
      <div class="article-tags">标签：<a href="" rel="tag">PHP</a></div>
      <div class="relates">
        <div class="title">
          <h3>相关推荐</h3>
        </div>
        <ul>
          @foreach($relation_article as $item)
          <li><a href="/article/{{$item->id}}">{{$item->title}}</a></li>
          @endforeach
        </ul>
      </div>
      
      <div class="title" id="comment">
        <h3>匿名评论 <small>抢沙发</small></h3>
      </div>
		<!--
      <div id="respond">
        <div class="comment-signarea">
          <h3 class="text-muted">评论前必须登录！</h3>
          <p> <a href="javascript:;" class="btn btn-primary login" rel="nofollow">立即登录</a> &nbsp; <a href="javascript:;" class="btn btn-default register" rel="nofollow">注册</a> </p>
          <h3 class="text-muted">当前文章禁止评论</h3>
        </div>
      </div>
      -->
      <div id="respond">
        <form action="" method="post" id="comment-form">
          <div class="comment">
            <div class="comment-title"><img class="avatar" src="/images/icon/icon.png" alt="" /></div>
            <div class="comment-box">
              <textarea placeholder="您的评论可以一针见血" name="comment" id="comment-textarea" cols="100%" rows="3" tabindex="1" ></textarea>
                <div class="comment-ctrl"> <span class="emotion">
                    <!--<img src="/images/face/5.png" width="20" height="20" alt="" />表情--></span>
                    <div class="comment-prompt"> <i class="fa fa-spin fa-circle-o-notch"></i> <span class="comment-prompt-text"></span></div>

                <input type="hidden" value="{{ $data->id }}" class="articleid" />
                <button type="button" name="comment-submit" id="comment-submit" tabindex="5" articleid="1">发送</button>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div id="postcomments">
        @foreach($comment as $c)
        <ol class="commentlist">
          <li class="comment-content">
            <div class="comment-avatar"><img class="avatar" src="/images/icon/icon.png" alt="" /></div>
            <div class="comment-main">
              <p>来自<span class="address">{{$c->ip}}</span>的用户<span class="time">({{$c->add_date}})</span><br />
                {{$c->content}}
               </p>
            </div>
          </li>
        </ol>
        @endforeach
        
        <div class="quotes">
        {{$comment->links()}}
        </div>
      </div>
    
@endsection
@section('script')
<link rel="stylesheet" href="/libs/editormd/css/editormd.preview.css?v={{ config('version') }}" />
<script src="/libs/editormd/lib/marked.min.js?v={{ config('version') }}"></script>
<script src="/libs/editormd/lib/prettify.min.js?v={{ config('version') }}"></script>
<script src="/libs/editormd/lib/raphael.min.js?v={{ config('version') }}"></script>
<script src="/libs/editormd/lib/underscore.min.js?v={{ config('version') }}"></script>
<script src="/libs/editormd/lib/sequence-diagram.min.js?v={{ config('version') }}"></script>
<script src="/libs/editormd/lib/flowchart.min.js?v={{ config('version') }}"></script>
<script src="/libs/editormd/lib/jquery.flowchart.min.js?v={{ config('version') }}"></script>
<script src="/libs/editormd/editormd.js?v={{ config('version') }}"></script>

<script type="text/javascript">
    $(function() {
        var testEditormdView, testEditormdView2;
        testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
            htmlDecode      : "style,script,iframe",  // you can filter tags decode
            emoji           : true,
            taskList        : true,
            tex             : true,  // 默认不解析
            flowChart       : true,  // 默认不解析
            sequenceDiagram : true,  // 默认不解析
        });
    });

    $.ajaxSetup({
        headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    })
    $("#comment-submit").click(function(){
        var commentContent = $("#comment-textarea");
        var commentButton = $("#comment-submit");
        var promptBox = $('.comment-prompt');
        var promptText = $('.comment-prompt-text');
        var articleid = $('.articleid').val();
        promptBox.fadeIn(400);
        if($.trim(commentContent.val()) === ''){
            promptText.text('请留下您的评论');
            return false;
        } 
        commentButton.attr('disabled',true);
        commentButton.addClass('disabled');
        promptText.text('正在提交...');
        $.ajax({   
            type:"POST",
            url:"/home/ajax_comment/" + articleid,
            
            data:"content=" + commentContent.val(),   
            cache:false, //不缓存此页面  
            success:function(data){
                $("#postcomments").prepend(data).fadeIn(400);
                promptText.text('评论成功!');
                commentContent.val(null);
                $(".commentlist").fadeIn(300);
                /*$(".commentlist").append();*/
                commentButton.attr('disabled',false);
                commentButton.removeClass('disabled');
            }
        });
        /*$(".commentlist").append(replace_em(commentContent.val()));*/
        promptBox.fadeOut(100);
        return false;
    });
</script>
@endsection